<template>
	<view class="x-wrapper">
		<view class="x-main-content">
			<u-navbar title="提交派遣人信息" bgColor="#fff" :fixed="true" leftIconColor="#333" leftIconSize="42rpx" autoBack
				placeholder>
			</u-navbar>
			<view class="main-info">
				<view class="main-content">
					<view class="content-item" style="color: #000;font-weight: 600;position: relative;">派遣人信息：
					</view>
					<view class="content-item">
						<view>姓名</view>
						<view>
							<input type="text" placeholder="请输入派遣人姓名" class="content-input"
								placeholder-style="font-size:24rpx;color:#ababab" maxlength="15" v-model="escortName" />
						</view>
					</view>
					<view class="content-item">
						<view>电话号</view>
						<view class="content-input">
							<input type="text" placeholder="请输入派遣人手机号" class="content-input"
								placeholder-style="font-size:24rpx;color:#ababab" maxlength="11"
								v-model="escortPhone" />
						</view>
					</view>
				</view>
				<van-popup :show="flag" @close="isClose" round>
					<view style="padding: 40rpx 20rpx;width: 80vw;">
						<view style="font-size: 36rpx;margin-bottom: 20rpx;">确定如下信息：</view>
						<view style="margin-bottom: 20rpx;">订单号：{{orderSn}}</view>
						<view style="margin-bottom: 20rpx;">接单人：{{escortName}}</view>
						<view style="margin-bottom: 20rpx;">接单人手机号：{{escortPhone}}</view>
						<view style="display: flex;justify-content: space-evenly;padding: 30rpx 0 ;">
							<span
								style="background-color: #48494a;color: #fff;padding: 10rpx 20rpx;border-radius: 20rpx;"
								@click="isClose">取消</span>
							<span
								style="background-color: #386fff;color:#fff;padding: 10rpx 20rpx;border-radius: 20rpx;"
								@click="toSubmit">确定</span>
						</view>
					</view>
				</van-popup>
				<view class="toConfirm">
					<view class="btn-confirm" @click="toConfirm">
						确定
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderSn: '',
				status: '',
				escortName: '',
				escortPhone: '',
				flag: false
			}
		},
		onLoad(e) {
			let ctx = JSON.parse(decodeURIComponent(e.data))
			this.orderSn = ctx.serviceOrderSn
		},

		created() {

		},
		methods: {
			async toConfirm() {
				if (this.escortName && this.escortPhone) {
					this.flag = true
				} else {
					uni.showModal({
						title: '提示',
						content: '请填写完整的信息！'
					})
				}
			},
			isClose() {
				this.flag = false
			},
			toSubmit() {
				let data = {
					orderSn: this.orderSn,
					status: 2,
					escortName: this.escortName,
					escortPhone: this.escortPhone
				}
				uni.showModal({
					title: '提示',
					content: '确定要提交吗？',
					success: async res => {
						if (res.confirm) {
							let req = await this.$request('/api/externalOrder/shandongOrderPushAccompany',
								data,
								'POST','type')
							console.log(req)
							if (req.data.code == 200) {
								uni.showToast({
									title: '成功！',
									icon: 'success',
									duration: 1000
								})
								this.escortName = ''
								this.escortPhone = ''
								this.$nextTick(() => {
									uni.$emit('reFrash',1)
									uni.navigateBack({
										delta: 1
									})
								})
							}else{
								uni.showModal({
									title:"提示",
									content: '山东平台无法查到此订单！',
								})
							}
						}
						if (res.cancel) {
							return
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main-info {
		margin-top: 60rpx;
		padding: 0 40rpx;

		.main-content {
			background-color: #fff;
			border-radius: 20rpx;

			.content-item {
				padding: 30rpx 20rpx;
				font-size: 28rpx;
				color: #555;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.content-input {
					font-size: 24rpx;
					position: relative;


				}

				input {
					font-size: 24rpx;
					color: #ababab;
				}
			}
		}

		.toConfirm {
			position: fixed;
			width: 100%;
			bottom: 60rpx;
			left: 0;
			display: flex;
			justify-content: center;

			.btn-confirm {
				padding: 12rpx 0;
				background-color: #386fff;
				font-size: 28rpx;
				color: #fff;
				border-radius: 30rpx;
				letter-spacing: 1px;
				width: 600rpx;
				text-align: center;
			}
		}
	}

	/deep/.u-radio-group {
		justify-content: space-between;
	}
</style>